<template>
  <div class="map-box">
    <div id="container"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "demoIndex",
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      let that = this;
      AMapLoader.load({
        key: "6a2dc7580975941d15ac0f1f36100748", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            pitch: 60,
            rotation: 0,
            rotateEnable: true,
            pitchEnable: true,
            zoom: 17,
            zooms: [17, 20],
            center: [116.333926, 39.997245],
            viewMode: "3D", //开启3D视图,默认为关闭
            mapStyle: "amap://styles/b11844bb343568a6b3e5e397f9695f57",
            features: ["bg", "road", "building"],
          });
          this.map.plugin(
            ["AMap.ToolBar", "AMap.Scale", "AMap.ControlBar"],
            function () {
              // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
              that.map.addControl(new AMap.ToolBar());

              // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
              that.map.addControl(new AMap.Scale());

              that.map.addControl(
                new AMap.ControlBar({
                  position: {
                    top: "10px",
                    right: "10px",
                  },
                })
              );

              // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
              // that.map.addControl(new AMap.OverView({ isOpen: true }));

              // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
              // that.map.addControl(new AMap.MapType());

              // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
              // that.map.addControl(new AMap.Geolocation());
            }
          );
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.map-box {
  width: 100vw;
  height: 100vh;
  // position: relative;
  #container {
    width: 100vw;
    height: 100vh;
  }
}
</style>